<template>
    <div>
        <div class="goods" v-for="(item,index) in cartArr" :key="index">
            {{item.title}}
            <div class="goods-right">
                <i class="cubeic-remove" @click="removeCart(index)"></i>
                <span>{{item.cartCount}}</span>
                <i class="cubeic-add" @click="addCart(index)"></i>
            </div>
        </div>
        <cube-button style="margin:10px 0">下单</cube-button>
        <cube-button @click="clearCart">清空购物车</cube-button>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    name:'Cart',
    data() {
        return {
            
        }
    },
    computed: {
        ...mapState({
            cartArr:state=>state.cartArry
        })
    },
    methods: {
        // 减少商品
        removeCart(index){
            this.$store.commit('cartReomve',index)
        },
        // 增加商品
        addCart(index){
            this.$store.commit('cartAdd',index)
        },
        // 清空购物车
        clearCart(){
            this.$store.commit('cartClear')
        }
    },
}
</script>
<style lang="stylus" scoped>
.goods{
    padding 10px
    // text-align center
    .goods-right{
        float right
    }
    i{
        font-size 18px
    }
}
</style>